<template>
  <page-header-wrapper :title="false">
    <a-card style="width: 900px" title="设计师管理">
      <template slot="extra">
        <a-button size="small" icon="plus" type="primary" @click="onAddMember">添加设计师</a-button>
      </template>
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          size="middle"
          :row-key="(record) => record.uid"
          :columns="designColumns"
          :data="designData"
        >
          <template slot="status" slot-scope="text">
            <a-tag v-if="text == 1" color="blue">正常</a-tag>
            <a-tag v-else color="red">禁用</a-tag>
          </template>
          <template slot="action" slot-scope="text,record">
            <a-button v-if="record.status == 1" size="small" type="danger" icon="delete" @click="onDel(record.uid)">禁用</a-button>
            <a-button v-else size="small" type="primary" icon="redo" @click="onDel(record.uid)">恢复</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      title="编辑设计师"
      v-model="visible"
      :width="600"
      @ok="onSubmit"
      @cancel="resetForm"
    >
      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="用户名" prop="username">
          <a-input type="text" v-model="addForm.username" placeholder="请输入用户名" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input-password v-model="addForm.password" placeholder="请输入登陆密码" />
        </a-form-model-item>
        <a-form-model-item label="选择工作台" prop="group">
          <a-select v-model="addForm.group" placeholder="选择所属工作台">
            <a-select-option v-for="(item,index) in groupOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="员工类型" prop="group_type">
          <a-select v-model="addForm.group_type" placeholder="选择员工类型">
            <a-select-option v-for="(item,index) in groupTypeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择所属上级" prop="parent_id">
          <a-select
            show-search
            v-model="addForm.parent_id"
            placeholder="选择所属上级"
            :filter-option="filterOption"
          >
            <a-select-option v-for="(item,index) in userOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="用户状态" prop="status">
          <a-radio-group name="radioGroup" v-model="addForm.status">
            <a-radio v-for="(item, index) in statusOpts" :key="index" :value="index">
              {{item}}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="选择角色" prop="role">
          <a-select v-model="addForm.role" placeholder="选择选择角色">
            <a-select-option v-for="(item, index) in roleOpts" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { delDesignMember, getAdd, getDesignMember, postAdd } from '@/api/design.process'
import designColumns from '@/columns/design.process'

export default {
  components: {
    STable
  },
  name: 'DesignMember',
  data () {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      designColumns: designColumns.designer_list,
      designData: parameters => {
        return getDesignMember(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      queryParam: {},
      visible: false,
      addForm: {},
      addRules: {
        username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ],
        password: [ { required: true, message: '请输入登陆密码', trigger: 'blur' } ],
        group: [ { required: true, message: '请选择工作组', trigger: 'change' } ],
        group_type: [ { required: true, message: '请选员工类型', trigger: 'change' } ],
        parent_id: [ { required: true, message: '请选择所属上级', trigger: 'change' } ],
        status: [ { required: true, message: '选择用户状态', trigger: 'change' } ],
        role: [ { required: true, message: '请选择此用户的角色', trigger: 'change' } ]
      },
      groupOpts: {},
      roleOpts: {},
      userOpts: {},
      statusOpts: {},
      groupTypeOpts: {}
    }
  },
  methods: {
    onAddMember () {
      getAdd().then(res => {
        if (res.status === 0) {
          this.roleOpts = res.result.role_opts
          this.userOpts = res.result.user_opts
          this.statusOpts = res.result.status_opts
          this.groupOpts = res.result.group_opts
          this.groupTypeOpts = res.result.group_type_opts
          this.addForm = res.result.user
          this.visible = true
        }
      })
    },
    onSubmit () {
      const app = this
      const data = {}
      app.$refs.addForm.validate(valid => {
        if (valid) {
          for (const k in app.addForm) {
            data['user[' + k + ']'] = app.addForm[k]
          }
          postAdd(data).then(res => {
            if (res.status === 0) {
              app.resetForm()
              app.visible = false
              app.$refs.table.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm () {
      this.$refs.addForm.resetFields()
    },
    filterOption (input, option) {
      return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
    },
    onDel (uid) {
      const app = this
      delDesignMember(uid).then(res => {
        if (res.status === 0) {
          app.$refs.table.refresh(true)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
